<template>
  <div class="containt">
    <div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
      <div>
        <el-icon>
          <Search/>
        </el-icon>
        <i>筛选搜索</i>
      </div>
      <div>
        <ElButton plain @click="reset(formRef)">重置</ElButton>
        <ElButton type="primary" @click="search(formRef)">查询搜索</ElButton>
      </div>
    </div>
    <el-col>
    <el-form inline :model="form" ref="formRef" label-width="140px" label-position="right">
      <el-form-item label="输入搜索:" prop="id"> 
        <el-input placeholder="服务单号" v-model.number="form.id"></el-input>
      </el-form-item>
      <el-form-item label="处理状态:" prop="status"> 
        <el-select placeholder="全部" v-model="form.status">
          <el-option label="待处理" value="0"></el-option>
          <el-option label="退货中" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已拒绝" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间:" prop="createTime"> 
        <el-date-picker
        v-model="form.createTime"
        type="date" style="width: 200px;"
        placeholder="请选择时间"
      />
      </el-form-item>
      <el-form-item label="操作人员:" prop="handleMan"> 
        <el-input placeholder="全部" v-model="form.handleMan"/>
      </el-form-item>
      <el-form-item label="处理时间:" prop="handleTime"> 
        <el-date-picker
        v-model="form.handleTime"
        type="date" style="width: 200px;"
        placeholder="请选择时间"
      />
      </el-form-item>
    </el-form>
  </el-col> 
  </div>
</template>
<script setup lang="ts">
import { Order } from '@/request/api';
import type { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
  let formRef = ref<FormInstance>()

  let form = reactive({
    createTime:"",
    handleMan:"",
    handleTime:"",
    id:null,
    status:null,
  })
  // 判断表单是否可以进行请求
  const isFormEmit = function(){
    for(let key in form){
      // 有不为空的字段，可以emit
      if(form[key]){
        return true
      }
    }
    return false
  }
  // 重置表单
  const reset = function(formEl:FormInstance | undefined){
    if (!formEl) return
  formEl.resetFields()
    
  }
  // 时间格式化
  const timeFormate = function(time){
    if(!time){
      // 如果time等于空
      return time
    }
    let timer = new Date(time)
    let year = timer.getFullYear()
    let month = timer.getMonth()+1
    let day = timer.getDate()
    let month2 = null
    let day2 = null
    if(month<10){
      month2 = "0"+month
    }else{
      month2 = month
    }
    if(day<10){
      day2 = "0"+day
    }else{
      day2 = day
    }
    return year+"-"+month2+"-"+day2
  }
  // 自定义事件
  const emit = defineEmits<{(e:"SearchEmit",param:Order.IreqOrderReturn):void}>()
  // 搜索
  const search = function(formEl:FormInstance | undefined){
      // if(isFormEmit()){
      //   emit("SearchEmit",form)
      // }
      form.createTime = timeFormate(form.createTime)
      form.handleTime = timeFormate(form.handleTime)
      emit("SearchEmit",form)
      formEl.resetFields()
  }
</script>
<style scoped>
.containt{
  border:1px solid #ccc;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.el-input,.el-select,.el-date-picker{
  width: 200px;
}
.el-form{
  max-width: calc(100vw - 400px);
}
.el-col{
  margin-bottom: 10px;
}
span{
  margin-right: 10px;
  color: #606266;
  font-size: 14px;
}
</style>